<style scoped>
	.u-m-r-20 {
		margin-right: 10px;
	}

	.u-m-b-10 {
		margin-bottom: 5px;
	}

	.u-type-info {
		color: #999;
	}

	.u-flex {
		display: flex;
		align-items: center;
	}

	.u-row-between {
		justify-content: space-between
	}

	.u-font-16 {
		font-size: 16px;
	}

	.u-font-bold {
		font-weight: bold;
	}
</style>
<template>
	<div>
		<el-dialog title="审批详情" :visible.sync="show1" width="80%">

			<div style="display: flex;">
				<div style="flex: 1;">
					<div class="u-m-20 u-bg-fff u-p-20" style="border-radius: 16rpx;">
						<div class="u-flex u-row-between u-m-b-10">
							<div class="u-font-16 u-font-bold">{{detail.content}}</div>
							<img src="@/assets/sIcon38.png" style="width: 30px;height: 30px;"></img>
						</div>
						<div class="u-m-b-10 u-font-bold">{{detail.remark}}</div>

						<div class="u-type-info">
							<div class="u-m-b-10">
								<span class="u-m-r-20">类别</span>
								<span>{{detail.scheduleTypeStr}}</span>
							</div>
							<div class="u-m-b-10">
								<span class="u-m-r-20">执行人</span>
								<span>{{detail.executeByName}}</span>
							</div>
							<div class="u-m-b-10">
								<span class="u-m-r-20">开始时间</span>
								<span>{{detail.createTime}}</span>
							</div>
							<div class="u-m-b-10" v-if="detail.planCompleteTime">
								<span class="u-m-r-20">计划完成时间</span>
								<span>{{detail.planCompleteTime.split(" ")[0]}}</span>
							</div>
							<div class="u-m-b-10" v-if="detail.situationDesc">
								<span class="u-m-r-20">完成记录</span>
								<span>{{detail.situationDesc}}</span>
							</div>
							<div class="u-m-b-10" v-if="detail.actualCompleteTimeStr">
								<span class="u-m-r-20">完成时间</span>
								<span>{{detail.actualCompleteTimeStr}}</span>
							</div>
						</div>
					</div>

					<div v-if="approveDet" class="displayFlex" style="margin-top: 10px;">
						<div v-for="(item1,index1) in approveDet" :key="index1">
							<div v-if="index1 != approveDet.length - 1" class="displayFlex">
								<div class="displayFlex">
									<img src="@/assets/sIcon36.png" style="width: 30px;height: 30px;"></image>
									<span style="margin-left: 5px;">{{item1.userName}}</span>
								</div>
								<div style="margin-left: 10px;margin-right: 10px;">
									<img src="@/assets/sIcon37.png" style="width: 20px;height: 10px;"></image>
								</div>
							</div>
							<div class="displayFlex" v-else>
								<img v-if="item1.status == 'APPROVING' || item1.status == 'WAIT'" src="@/assets/sIcon38.png"
									style="width: 30px;height: 30px;" />
								<img v-else-if="item1.status == 'PASS'" src="@/assets/sIcon30.png" style="width: 30px;height: 30px;" />
								<img v-else-if="item1.status == 'FAIL'" src="@/assets/sIcon39.png" style="width: 30px;height: 30px;" />
								<img v-else-if="item1.status == 'CANCEL'" src="@/assets/sIcon40.png"
									style="width: 30px;height: 30px;" />
								<span style="margin-left: 5px;">{{item1.userName}}</span>
								<span style="color: #999;font-size: 10px;">({{item1.statusStr}})</span>
							</div>
						</div>
					</div>

					<div class="u-flex u-row-between" style="margin-top: 30px;" v-if="infoDet.isAllowApprove">
						<!-- <el-button type="warning" shape="circle" plain style="flex: 1;" @click="pinglun()">评论</el-button> -->
						<el-button type="primary" shape="circle" plain style="flex: 1;margin: 0 20px;"
							@click="doApprove('FAIL')">驳回</el-button>
						<el-button type="primary" shape="circle" style="flex: 1;" @click="doApprove('PASS')">同意</el-button>
					</div>

				</div>

				<div style="height: 100%;flex: 1;padding: 0px 10px 0 10px;">
					<div style="font-size: 18px;font-weight: bold;margin-bottom: 10px;">评论</div>
					<div style="background: #f5f5f5;padding: 10px;" v-if="discussList.length > 0">
						<div v-for="(item,index) in discussList" :key="index" class="u-m-b-10">
							<div class="u-flex u-m-b-10">
								<div class="u-m-r-20">{{item.userName}}</div>
								<div>{{item.createTime}}</div>
							</div>
							<div>{{item.content}}</div>
							<!-- <uploadImg v-if="item.fileIds" :defaultFileIDList="[item.fileIds]" mode="preview"></uploadImg> -->
						</div>
					</div>

					<div style="margin-top: 20px;">
						<el-input type="textarea" :rows="4" placeholder="填写评论" v-model="data3.content"></el-input>

					</div>

					<div style="margin-top: 20px;" v-if="discussFileList.length > 0">
						<div class="u-flex" v-for="(obj, index) in discussFileList">
							{{getFileName(obj.raw.name)}}
							<div style="margin-left: 20px;" @click="removeDiscussFileList(index)">×</div>
						</div>
					</div>

					<div style="margin-top: 20px;">
						<el-upload action="" ref="contractUpload" :on-change="changeDiscussFile" class="upload" multiple
							:show-file-list="false" :auto-upload="false">
							<div class="upload-btn"></div>
						</el-upload>
					</div>

					<div>
						<el-button type="text" class="save-discuss-btn" @click="completePingLun">上传评论</el-button>
					</div>
					<!-- <el-dialog :visible.sync="sampleImgVisible" :append-to-body="true">
						<img width="100%" :src="sampleImageUrl" alt="">
					</el-dialog> -->
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import $ from 'jquery'

	let that
	let APPKEY = '5da5441f62e48aedc7a3853ffc75c2db';
	let PRODID = 'gf';
	let UPLOAD_ACTION = '/upload';
	let VIEW_ACTION = '/view';
	let REMOVE_ACTION = '/remove';
	let IMGURL = 'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload';

	export default {
		props: [],
		data() {
			return {
				show1: false,
				params: {
					approvalId: '',
					referId: '',
				},
				detail: {},
				approveDet: {},
				infoDet: {},
				data3: {
					show: false,
					content: '',
					fileIds: ''
				},
				discussList: [],
				discussFileList: [],
				fileIdList: [],
			}
		},

		mounted() {
			that = this
		},

		methods: {

			open(item) {
				console.log(item)
				that.show1 = true
				that.params.approvalId = item.id
				that.getData()
			},

			pinglun() {
				that.data3 = {
					show: true,
					content: '',
					fileIds: ''
				}
			},

			async doApprove(type) {

				this.$prompt('请输入审批意见', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputType: 'textarea',
				}).then(({
					value
				}) => {
					if(!value)return that.$message.error("请填写审批意见") 
					that.ajax({
						contentType: 'application/json',
						url: 'approvalNode/doApprove',
						data: JSON.stringify({
							approvalId: that.params.approvalId,
							status: type,
							remark: value
						}),
						success: (result) => {
							that.$emit("success", true)
							that.show1 = false
						}
					}, "加载中...")
				}).catch(() => {});

				/* this.$confirm('是否确认进行此操作？', '确认', {
					distinguishCancelAndClose: true,
					confirmButtonText: '保存',
					cancelButtonText: '放弃'
				}).then(() => {
					that.ajax({
						contentType: 'application/json',
						url: 'approvalNode/doApprove',
						data:JSON.stringify({
							approvalId: that.params.approvalId,
							status: type,
						}),
						success: (result) => {
							that.$emit("success",true)
							that.show1 = false
						}
					}, "加载中...")
					
				}) */
			},

			//评论
			async completePingLun() {
				that.data3.referId = that.params.referId

				if (that.data3.content == '') return that.$message.error("请填写评论内容")

				that.fileIdList = [];
				that.uploadFileAction(0, that.discussFileList, function() {
					that.data3.fileIds = that.fileIdList.length > 0 ? that.fileIdList.join(",") : ''
					that.ajax({
						contentType: 'application/json',
						url: 'approvalDiscuss/saveApprovalDiscuss',
						data: JSON.stringify(that.data3),
						success: (result) => {
							that.data3.content = ''
							that.data3.fileIds = ''
							that.getApprovalDiscussListByReferId()
						}
					}, "加载中...")

				})
			},

			async getData() {
				that.ajax({
					url: 'approvalNode/getApprovalInfoByApprovalId',
					data: that.params,
					contentType: 'application/x-www-form-urlencoded',
					success: (result) => {

						let thisResult = result.data
						that.approveDet = thisResult.nodeList
						that.infoDet = thisResult.info
						that.params.referId = thisResult.info.referId
						that.ajax({
							url: '/documentEntSchedule/getEntScheduleInfoById',
							data: {
								scheduleId: thisResult.info.referId
							},
							contentType: 'application/x-www-form-urlencoded',
							success: async (result) => {
								that.detail = result.data
								await that.getApprovalDiscussListByReferId()
							}
						}, "加载中...");

					}
				}, "加载中...");


			},

			//获取评论列表
			async getApprovalDiscussListByReferId() {
				that.ajax({
					url: 'approvalDiscuss/getApprovalDiscussListByReferId',
					data: {
						referId: that.params.referId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: (thisResult) => {
						that.discussList = thisResult.data
					}
				})
			},

			getFileName: function(fileName) {
				if (!fileName || fileName.length <= 10) {
					return fileName
				}
				var names = fileName.split(".");
				var name = names[0]
				var fileType = ''
				if (names.length > 1) {
					fileType = names[1];
				}
				return name.substring(0, 7) + '...' + name.substring(7, 8) + '.' + fileType;
			},

			randomChar: function(l) {
				var x = "0123456789qwertyuioplkjhgfdsazxcvbnm";
				var tmp = "";
				var timestamp = new Date().getTime();
				for (var i = 0; i < l; i++) {
					tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
				}
				return timestamp + tmp;
			},

			uploadFileAction: function(index, fileList = [], callback) {
				var _this = this;
				if (fileList.length == 0) return callback()
				if (index >= fileList.length && callback) {
					callback();
					return;
				}

				var file = fileList[index].raw;
				var formdata = new FormData()
				formdata.append("file", file);
				formdata.append("appKey", APPKEY);
				formdata.append("businessCode", that.randomChar(19));
				formdata.append("prodID", PRODID);
				$.ajax({
					url: 'https://www.weifeibangbang.com/file/upload',
					data: formdata,
					type: 'POST',
					dataType: 'json',
					contentType: false,
					processData: false,
					success: function(result) {
						_this.fileIdList.push(result.data);
						_this.uploadFileAction(++index, fileList, callback);
					},
					error: function() {}
				})
			},

			removeDiscussFileList: function(index) {
				var _this = this;
				_this.discussFileList.splice(index, 1);
			},

			changeDiscussFile: function(file, fileList) {
				var _this = this;
				_this.discussFileList.push(file);
			},

		}
	}
</script>

<style>
	.upload-btn {
		width: 21px;
		height: 20px;
		background-image: url("../assets/attachment.png");
		background-size: cover;
	}
</style>